<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8" />
    <title>test</title>
    <script type="text/javascript" th:src="@{/js/user_login.js}"></script>
    <button type="button" onclick="request()">请求</button>
</head>
<body>

<script type="text/javascript">
    function request() {
        var messageUserLoginRequest = new proto.MessageUserLoginRequest();     //对应的就是proto文件中message 名
        messageUserLoginRequest.setUsername("Tom");
        messageUserLoginRequest.setPassword("123");

        var httpRequest = new XMLHttpRequest();//第一步：创建需要的对象
        httpRequest.open('POST', 'http://127.0.0.1:8080/demo/test', true); //第二步：打开连接
        httpRequest.setRequestHeader("Content-type","application/byte");//设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）
        httpRequest.send(messageUserLoginRequest.serializeBinary());//发送请求 将情头体写在send中
        /**
         * 获取数据后的处理程序
         */

        httpRequest.onreadystatechange = function () {//请求后的回调接口，可将请求成功后要执行的程序写在其中
            if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功
                var byte = httpRequest.response;
                console.log("typeof byte: " + typeof byte);
                console.log(" byte : " + byte);
            }
        };
    }

</script>

</body>
</html>